<template>
	<view class="content" :style="[pageStyle]">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="not-diy" v-if="notDiy">
			<u-empty :icon="uEmpty.page" text="模版未找到"></u-empty>
		</view>
		<view v-else>
			<view :style="[intoStyle]">
				<block v-for="(item,index) in list.content" :key="index">
					<wlk-navbar v-if="item.type=='topNav'" :title="item.params.diyName"
						:leftIconColor="item.style.titleColor" :leftColor="item.style.titleColor"
						:fontColor="item.style.titleColor" :transparentTitleColor="item.style.titleColor"
						:bgColor="item.style.navColor" :scrollTop="scrollTop"
						:navbarType="item.params.mode=='into'?5:0"></wlk-navbar>
					<wlk-image v-if="item.type=='image'" :item="item" :systemInfo="systemInfo"></wlk-image>
					<wlk-notice v-if="item.type=='notice'" :item="item"></wlk-notice>
					<wlk-search v-if="item.type=='search'" :item="item" :scrollTop="scrollTop"
						:borderHeight="borderHeight"></wlk-search>
					<wlk-text v-if="item.type=='text'" :item="item"></wlk-text>
					<wlk-blank v-if="item.type=='blank'" :item="item"></wlk-blank>
					<wlk-border v-if="item.type=='border'" :item="item"></wlk-border>
					<wlk-nav v-if="item.type=='nav'" :item="item" :systemInfo="systemInfo"></wlk-nav>
					<wlk-magic v-if="item.type=='magic'" :item="item" :systemInfo="systemInfo"></wlk-magic>
					<wlk-line @doneWaterFall="setWaterFallHeight" v-if="item.type=='line'" :item="item"
						:borderHeight="borderHeight"></wlk-line>
					<wlk-end @doneWaterFall="setWaterFallHeight" v-if="item.type=='end'" :item="item"
						:scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-end>
					<wlk-tag @doneWaterFall="setWaterFallHeight" v-if="item.type=='tag'" :item="item"
						:scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-tag>
					<wlk-note @doneWaterFall="setWaterFallHeight" v-if="item.type=='note'" :item="item"
						:borderHeight="borderHeight"></wlk-note>
					<wlk-wechar v-if="item.type=='wechar'" :item="item"></wlk-wechar>
					<wlk-float v-if="item.type=='float'" :item="item"></wlk-float>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import share from "@/wlkutils/share";
	export default {
		components: {},
		data() {
			return {
				list: {},
				scrollTop: 0,
				pageStyle: {
					backgroundColor: ''
				},
				intoStyle: {
					paddingTop: ''
				},
				systemInfo: uni.getSystemInfoSync(),
				notDiy: false,
				borderHeight: 0,
				id: 0
			}
		},
		onLoad() {
			_self = this;
			this.id = this.$Route.query.id;
		},
		onShow() {
			_self.list = {};
			_self.getData();
		},
		onShareAppMessage(res) {
			let data = new Object();
			data.params = {
				id: this.id
			};
			return share.setShareInfo(data);
		},
		onPageScroll: function(e) {
			_self.scrollTop = e.scrollTop;
		},
		methods: {
			getData() {
				uni.$u.http.post('diy/getDiyPage', {
					windowWidth: _self.systemInfo.windowWidth,
					type: 'custom',
					id: this.id
				}).then(res => {
					if (res.data) {
						_self.initShareInfo();
						_self.list = res.data;
						_self.pageStyle.backgroundColor = _self.list.content[0].style.bgColor;
						this.notDiy = false;
					} else {
						this.notDiy = true;
					}
				}).catch(res => {

				})
			},
			initShareInfo() {
				let data = new Object();
				data.params = {
					id: _self.id
				};
				return share.setShareInfo(data);
			},
			setWaterFallHeight(height) {
				this.borderHeight = height;
			},
		}
	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: auto;

		.content {
			width: 100%;
			height: 100%;

			.not-diy {
				margin-top: 30%;
			}
		}
	}
</style>